<template>
    <div class="editInfo ">
      <path-tracking :path='path' />

      <div class="formLayout">
        <div class="AccountInfo">
            <div class="tableTitle">
              <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
              <div class="tableText">账号信息</div>
            </div>
            <!--表单-->
            <el-row class="rows basic">
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="name">
                        <label class="label" for="">
                            会员姓名
                        </label>
                        <el-input class="input-cont" placeholder="请输入会员姓名"  :disabled="isDisabled" v-model="basicInfo.name"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="phone">
                        <label class="label" for="">
                            <img class="required" v-if="isBuy == '否'" src="@/assets/img/flower_red.png" alt="">
                            手机
                        </label>
                        <el-input class="input-cont" placeholder="请输入手机号码" :disabled="isDisabled" v-model="basicInfo.phone"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="maleName">
                        <label class="label" for="">
                            <img class="required" v-if="isBuy == '是'" src="@/assets/img/flower_red.png" alt="">
                            男士姓名
                        </label>
                        <el-input v-model="basicInfo.maleName" class="input-cont" placeholder="请输入客户姓名" ></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="femaleName">
                        <label class="label" for="">
                            <img class="required" v-if="isBuy == '是'" src="@/assets/img/flower_red.png" alt="">
                            女士姓名
                        </label>
                        <el-input v-model="basicInfo.femaleName" class="input-cont" placeholder="请输入配偶姓名" ></el-input>
                    </div>
                </el-col>
                 <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="maleBirthday">
                        <label class="label" for="" >
                            男士生日
                        </label>
                        <el-date-picker
                          style="flex:1"
                          size="small"
                          v-model="basicInfo.maleBirthday"
                          formate="yyyy-MM-dd"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          placeholder="选择日期"
                        />
                    </div>
                </el-col>
                 <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="maleCalendarType">
                        <label class="label" for="">
                            男士生日类型
                        </label>
                        <el-select style="flex:1" v-model="basicInfo.maleCalendarType" class="input-cont" placeholder="请选择内容">
                            <el-option label="农历" value="2"></el-option>
                            <el-option label="阳历" value="1"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="femaleBirthday">
                        <label class="label" for="">
                            女士生日
                        </label>
                        <el-date-picker
                          style="flex:1"
                          v-model="basicInfo.femaleBirthday"
                          formate="yyyy-MM-dd"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="date"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="femaleCalendarType">
                        <label class="label" for="">
                            女士生日类型
                        </label>
                        <el-select style="flex:1" v-model="basicInfo.femaleCalendarType" class="input-cont" placeholder="请选择内容">
                            <el-option label="农历" value="2"></el-option>
                            <el-option label="阳历" value="1"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="weddingDay">
                        <label class="label" for="">
                            结婚纪念日
                        </label>
                        <el-date-picker
                            style="flex:1"
                            v-model="basicInfo.weddingDay"
                            formate="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="weddingCalendarType">
                        <label class="label" for="">
                            结婚纪念日类型
                        </label>
                        <el-select style="flex:1" v-model="basicInfo.weddingCalendarType" class="input-cont" placeholder="请选择内容">
                            <el-option label="农历" value="2"></el-option>
                            <el-option label="阳历" value="1"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6">
                    <div class="items" ref="memorialDayPhone">
                        <label class="label" for="">
                            纪念日手机号
                        </label>
                        <el-input v-model="basicInfo.memorialDayPhone" class="input-cont" value="" placeholder="请输入手机号"></el-input>
                    </div>
                </el-col>
            </el-row>
        </div>
        <custom-tag 
            ref="customTag"
            title='客户标签'
            :id='id'
            :isShowSymbol='isShowSymbol'
        />
        
        <div class="SocialInfo">
          <div class="tableTitle">
              <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
              <div class="tableText">社交信息</div>
            </div>
          <el-row class="rows basic">
                <el-col :sm="12" :md="8" :lg="6" >
                    <div class="items">
                        <label class="label" for="">
                            QQ
                        </label>
                        <el-input size="small" class="input-cont" v-model="basicInfo.qq"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6" >
                    <div class="items">
                        <label class="label" for="">
                            微信
                        </label>
                        <el-input size="small" class="input-cont" v-model="basicInfo.weixinId"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6" >
                    <div class="items">
                        <label class="label" for="">
                            微博账号
                        </label>
                        <el-input size="small" class="input-cont" v-model="basicInfo.weibo"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6" >
                    <div class="items">
                        <label class="label" for="">
                            facebook账号
                        </label>
                        <el-input size="small" class="input-cont" v-model="basicInfo.facebook"></el-input>
                    </div>
                </el-col>
                <el-col :sm="12" :md="8" :lg="6" >
                    <div class="items">
                        <label class="label" for="">
                            支付宝账号
                        </label>
                        <el-input size="small" class="input-cont" v-model="basicInfo.alipay"></el-input>
                    </div>
                </el-col>
          </el-row>
            <div class="formBtnList">
                <button class="sureBtn" @click="putEditInfo">确定</button>
                <button class="cancelBtn" @click="toCancel">取消</button>
            </div>
        </div>
      </div>

    </div>

</template>
<script>
import pathTracking from '@/components/common/pathTracking'
import datas from './datas.js'
import verification from  '../../components/js/verification'
import customTag from '../../components/pages/label'

export default {
    data(){
        return{
          path: ['CRM', '客户管理', {label: '客户列表', name: 'customerList'}, '编辑'],
          //basicInfo:{},
          basicInfo: {
            name: '',
            phone: '',
            maleName: '',
            femaleName: '',
            maleBirthday: '',
            femaleBirthday: '',
            weddingDay: '',
            memorialDayPhone: '',
            femaleCalendarType: '1',
            maleCalendarType: '1',
            weddingCalendarType: '1'
          },
          isDisabled:true,//是否禁止编辑
          ins:0,
          id:'',
          isBuy:'',
          isShowSymbol:true
        }
    },
    components: {
      customTag,
      pathTracking
    },
    methods:{
      toJump(){
        this.$router.push({name:'customerList'})
      },
      toCancel(){
        this.$router.push({name:'customerList'})
      },
      tabActive(num){
        this.ins = num
      },
      isObj(target) {  
        return Object.prototype.toString.call(target) === "[object Object]"
      },
      // 表单验证
      validateData() {
        let pass = true;
        datas.validateOptions.map(ele => {
          let mixNode = this.$refs[ele._ref]
          let node = this.isObj(mixNode) ? mixNode.$el : mixNode
          let flag = ele.regexp ? ele.regexp.test(this.basicInfo[ele.key]) : (this.basicInfo[ele.key] && !/^[ ]*$/.test(this.basicInfo[ele.key]))
          // 没填就不通过
          !flag && (pass = false)
          // 未通过的变成红色
          flag
          ?
          (node.classList.remove('qxz_redInput'))
          :
          (node.classList.add('qxz_redInput'))
        })
        return pass
      },

      //获取账号信息
      getBasicInfo(id){
        var that = this;
        that.$ajax({
            method:'GET',
            url: api.crm + '/customerInfo/edit/' + id,
          }).then((res) => {
            var data = res.data;
            if(data.status == 200){
              that.basicInfo = Object.assign(this.basicInfo, data.result);
              that.$refs.customTag.showTags(res)
              //that.$refs.customTag.dispatchData(data.result);
              //console.log('客户信息详情',that.basicInfo);
            }
        })
      },

      //点击确定
      putEditInfo(){
        // if(!this.validateData()) {
        //     //console.log('未验证通过')
        //     this.$message({
        //         message: '内容不能为空',
        //         type: 'warning'
        //     });
        //     return
        // }
        var that = this;
        if(this.$route.query.isBuy === '是') {
          let validateRes = this.validateData()
          if(!validateRes) {
            return
          }
        }
        var customTag = that.$refs.customTag.getResult();
        
        var editObj = {
          createBy:-1,
          id:that.id,
          name:that.basicInfo.name,
          phone:that.basicInfo.phone,
          maleName:that.basicInfo.maleName,
          femaleName:that.basicInfo.femaleName,
          maleBirthday:that.basicInfo.maleBirthday,
          maleCalendarType:that.basicInfo.maleCalendarType,
          femaleBirthday:that.basicInfo.femaleBirthday,
          femaleCalendarType:that.basicInfo.femaleCalendarType,
          weddingDay:that.basicInfo.weddingDay,
          weddingCalendarType:that.basicInfo.weddingCalendarType,
          memorialDayPhone:that.basicInfo.memorialDayPhone,//纪念日手机
          qq:that.basicInfo.qq,
          weibo:that.basicInfo.weibo,
          facebook:that.basicInfo.facebook,
          alipay:that.basicInfo.alipay, 
          weixinId:that.basicInfo.weixinId,
          systemTagCategoryVO:customTag
        }
        //console.log('编辑页面点击确定',editObj)
        that.$ajax({
          method:'PUT',
          url:api.crm + '/customerInfo',
          //url:that.apiCrm +'/customerInfo',
          data:editObj
        }).then((res) => {
          console.log('编辑请求',res)
          if(res.data.status == 200){
            that.$message({
              message: '编辑成功',
              type: 'success'
            });
            setTimeout(function(){
              that.$router.replace({name:'customerList'})
            },2000)
          }else{
            that.$message({
              message: '编辑失败',
              type: 'warning'
            });
          }
        }).catch((err) => {
          that.$message({
              message: err.data.msg,
              type: 'warning'
          });
        })
      },

},
    created(){
      this.id = this.$route.query.id;
      this.isBuy = this.$route.query.isBuy;
      this.getBasicInfo(this.id);
      if(this.isBuy == '是'){
        this.isShowSymbol = true
      }else{
        this.isShowSymbol = false
      }
    },
    watch:{
      $route:{
        handler(newValue,oldValue){
          //console.log('newValue',newValue)
          if(newValue.name == 'edit'){
            this.getBasicInfo(newValue.query.id);
            this.isBuy = newValue.query.isBuy
            if(this.isBuy == '是'){
              this.isShowSymbol = true
            }else{
              this.isShowSymbol = false
            }
          }
          
        }
      }
    }
}
</script>
<style>
@import '../../components/css/viewCommon.css';
.editInfo{
  height: 100%;
  overflow: auto;
}
.editInfo .el-input__icon{
  line-height:34px 
}
.AccountInfo .el-input__inner{
  height: 32px;
}
.labelChoose span{
    display: inline-block;
    width: 78px;
    height: 34px;
    background-color: #e9e9e9;
    border-radius: 2px;
    color: #222;
    text-align: center;
    line-height: 34px;
    margin-right: 4px;
}
.labelChoose  .labelActive{
    background-color: #7e6b5a !important;
    color: #fff !important;
  }
.editInfo .formEdit .el-form-item .el-form-item__label{
		width: 122px !important;
	}
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
		/* content:'';
		background:url('/assets/img/flower_red.png') no-repeat center center ;
		background-size: 100%;
		width: 10px;
		height: 10px;
		display: block */
	}
	.el-form-item__error{
		position: absolute;
		top:38px
	}
</style>


<style scoped>
  /* .labelItem{
    display: flex;
    margin-top: 1.5rem;
  } */
  .items{
    margin-bottom: 10px;
  }
  .labelInput{
    width: 240px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    color: #606266;
    display: inline-block;
    height: 34px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    margin-right: 10px;
  }
  .tag{
    padding: 1rem 2rem;
    border-radius: .4rem;
    background: cyan;
    margin-right: 1rem;
    font-size: 1.4rem;
  }
	/* .editInfo{
		background-color: #fff;
		height: 100%;
		overflow: auto;
	} */
	.formLayout{
		margin:16px;
		background-color: #fff;
		padding: 0 24px 24px 24px;
    border-radius: 8px;
    

	}
  .formLayout .tableTitle{
    padding: 0;
  }
  /* .labelList span{
    display: inline-block;
    width: 78px;
    height: 34px;
    background-color: #e9e9e9;
    border-radius: 2px;
    color: #222;
    text-align: center;
    line-height: 34px;
    margin-right: 4px;
  } */
  /*.labelList h2{
    display: inline-block;
  }
  .labelList h2 span{
    display: inline-block;
    width: 78px;
    height: 34px;
    background-color: #e9e9e9;
    border-radius: 2px;
    color: #222;
    text-align: center;
    line-height: 34px;
  }*/

	/* .el-col-6{
		min-width:250px
	}
	.el-form-item{
		margin: 16px 0;
		min-width:250px
	}
  .formBtnList{
    margin-top:140px;
    display: flex;
    justify-content: center;
  }
  .formBtnList button{
    width: 120px;
    height: 40px;
    border-radius: 20px;
    border:0;
    color:#fff;
    margin:0 8px
  }
  .formBtnList button:hover{
    cursor: pointer;
  }
  .cancelBtn{
    background-color:#222
  }
  .sureBtn{
    background-color:#7e6b5a
  } */
    /* .formLayout .el-form-item{
		margin: 0;
		height: 40px;
		width: 24%;
		margin-bottom:16px;
		display:inline-block;
	}
	.el-form-item__content{
		display: inline-block;
	} */
	/* .editInfo .formEdit .el-form-item .el-form-item__label{
		width: 122px !important;
	} */
	/* .editInfo .formEdit .el-form-item:not(:last-child){
		float: left;
	} */

	.el-input__inner{
		width: 242px
	}



</style>
